<template>
	<div class="common-layout stage">
		<el-container>
			<el-header>
				<div />
				<div>
					<span
						v-for="item in stateClass.getMenu()"
						:key="item.key"
						class="menu-span"
						:class="stateClass.activeName.value == item.key ? 'active-menu' : ''"
						@click="stateClass.activeName.value = item.key"
					>
						{{ item.label }}
					</span>
				</div>
				<div class="right">
					<el-icon title="跳转后台" @click="stateClass.toWeb()"><Monitor /></el-icon>
					<el-button type="primary" @click="stateClass.logout()">退出登录</el-button>
				</div>
			</el-header>
			<el-main>
				<el-row style="flex: auto">
					<div
						class="notice"
						v-for="item in stateClass.noticeList.value"
						:key="item.id"
						v-show="(stateClass.activeName.value == 'home' || stateClass.activeName.value == 'wiki') && !item?.show"
					>
						<el-icon style="margin-right: 10px"><Microphone /></el-icon>{{ item.content }}
						<el-icon style="position: absolute; top: 10px; right: 10px; cursor: pointer" @click="item.show = true"
							><Close
						/></el-icon>
					</div>
					<div
						v-show="stateClass.activeName.value == 'home'"
						class="article-box"
						v-for="item in stateClass.articleList.value"
						:key="item.id"
					>
						<div class="img-box">
							<img :src="`${'http://ikun-pro-ui.fun:3000/static/'}${item.img}`" alt="" />
						</div>
						<div class="details">
							<div>
								<span
									style="padding: 2px 5px; margin-right: 5px; font-size: 12px; background: #f0f9eb; border-radius: 5px"
									v-for="(val, index) in item.tag?.split(',')"
									:key="index"
								>
									{{ val }}
								</span>
							</div>
							<div class="title">
								{{ item.title }}
							</div>
							<div class="content">
								{{ item.abstract }}
							</div>
							<div class="footer">
								<span
									><el-icon><Calendar /></el-icon>{{ item.createdAt }}</span
								>
								<span
									><el-icon><Folder /></el-icon>{{ item.type }}</span
								>
							</div>
						</div>
					</div>
					<div v-show="stateClass.activeName.value == 'class'" class="tag-content">
						<!-- 分类 -->
						<typeContent />
					</div>
					<div class="tag-content" v-show="stateClass.activeName.value == 'tag'">
						<!-- 分类 -->
						<tagContent />
					</div>
					<div class="archive" style="width: 100%; margin-right: 20px" v-show="stateClass.activeName.value == 'archive'">
						<archive />
					</div>
				</el-row>
				<el-row>
					<!-- 个人信息 -->
					<info />
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>
<script lang="ts" setup>
import { Monitor, Calendar, Folder, Microphone, Close } from '@element-plus/icons-vue'
import { StateClass } from './controller'
import info from './info/index.vue'
import archive from './archive/index.vue'
import typeContent from './category/index.vue'
import tagContent from './tag/index.vue'
const stateClass = new StateClass()
</script>
<style lang="scss" scoped>
.stage {
	.el-container {
		height: 100%;
	}
	.el-header {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.menu-span {
		margin: 0 10px;
		cursor: pointer;
	}
	.active-menu {
		padding-bottom: 5px;
		font-weight: bold;
		color: #409eff;
		border-bottom: 2px solid #409eff;
	}
	.right {
		display: flex;
		align-items: center;
		.el-icon {
			margin-right: 15px;
			cursor: pointer;
		}
	}
	.el-main {
		display: flex;
		background: #f4f4ff;
		.article-box {
			display: flex;
			flex-direction: column;
			width: 450px;
			height: 450px;
			margin: 10px;
			background: #ffffff;
			border: 1px solid #cccccc;
			border-radius: 5px;
			.img-box {
				width: 450px;
				height: 190px;
			}
			img {
				width: 450px;
				height: 190px;
				border-radius: 5px 5px 0 0;
			}
			.details {
				flex: 1;
				padding: 20px;
				.content {
					display: -webkit-box;
					overflow: hidden;
					color: #7e7290;
					text-overflow: ellipsis;
					white-space: normal; /* 或者使用 nowrap，根据需要 */
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3; /* 这里设置为3，表示最多显示三行 */
				}
				.title {
					font-size: 20px;
					font-weight: bold;
				}
				.footer {
					display: flex;
					color: #9ca3af;
					span {
						display: flex;
						align-items: center;
						margin-right: 20px;
						.el-icon {
							margin-right: 10px;
						}
					}
				}
			}
		}
		.notice {
			position: relative;
			display: -webkit-box;
			width: 100%;
			padding: 20px;
			margin-right: 20px;
			margin-bottom: 10px;
			overflow: hidden;
			text-overflow: ellipsis;
			background: #ffffff;
			border: 1px solid #cccccc;
			border-radius: 5px;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
		.tag-content {
			width: 100%;
			height: 200px;
			padding: 20px;
			margin-top: 10px;
			margin-right: 50px;
			background: #ffffff;
			border: 1px solid #cccccc;
			border-radius: 10px;
		}
	}
}
</style>
